<template>
  <div class="edit-container">
      <el-form v-loading="formLoading" ref="form" :model="form" label-width="120px">
        <el-form-item label="分类:" prop="type">
          <el-select v-model="form.type" placeholder="分类" clearable :disabled="true">
            <el-option :label="item.name" :value="item.id" v-for="item in typeList" :key="item.id"/>
          </el-select>
        </el-form-item>
        <el-form-item label="位置:" >
          <div>{{form.position}}</div>
        </el-form-item>
        <el-form-item label="具体位置:" >
          <div>{{form.specificPosition}}</div>
        </el-form-item>
        <el-form-item label="野生动物情况:" >
          <div>{{form.animalSituation}}</div>
        </el-form-item>
        <template v-if="form.picList.length>0">
          <el-form-item :label="'图片('+(form.picList.length ) +'/9)：'">
            <div class="acea-row">
              <div
                  v-for="(item,index) in form.picList"
                  :key="index"
                  class="pictrue mb10"
                  draggable="true"
              >
                <el-image
                    v-if="item"
                    class="photo-el-image"
                    :src="item"
                    :preview-src-list="form.picList"
                    style="height: 120px;margin: 30px 30px 0 0;"
                />
                <!--                      <img :src="item">-->
                <!--                      <i v-if="!isDisabled" class="el-icon-error btndel" @click="handleRemove(index)"/>-->
              </div>
              <!-- <div v-if="pram.sliderImages.length<6 && !isDisabled" class="upLoadPicBox" @click="modalPicTap('2')">
                <div class="upLoad">
                  <i class="el-icon-camera cameraIconfont" />
                </div>
              </div> -->
            </div>
          </el-form-item>
        </template>
        <el-form-item label="图片：" v-else>
          <div>暂无图片</div>
        </el-form-item>
        <template v-if="form.videoList.length>0">
          <el-form-item :label="'视频('+(form.videoList.length ) +'/9)：'">
            <div class="acea-row">
              <div
                  v-for="(item,index) in form.videoList"
                  :key="index"
                  class="videoBox"
                  draggable="true"
              >
                <video v-if="item" :src="item" controls="true" autoplay="false" style="height: 120px;margin: 30px 30px 0 0;"></video>
              </div>
            </div>
          </el-form-item>
        </template>
        <el-form-item label="视频：" v-else>
          <div>暂无视频</div>
        </el-form-item>
        <el-form-item label="办结情况：" v-if="form.allocationStatus == 3">
          <div>办理人：{{form.rescueHandle.name}}</div>
          <div>办理时间：{{form.rescueHandle.handleTime}}</div>
          <div v-html="'办理内容：'+form.rescueHandle.handleText"></div>
          <div>图片和视频：</div>
          <template v-if="form.rescueHandle.urlList">
            <el-form-item>
              <div class="acea-row">
                <div
                    v-for="(item,index) in form.rescueHandle.urlList"
                    :key="index"
                    class="pictrue mb10"
                    draggable="true"
                >
                  <el-image
                      v-if="item"
                      class="photo-el-image"
                      :src="item"
                      :preview-src-list="form.rescueHandle.urlList"
                      style="height: 120px;margin: 30px 30px 0 0;"
                  />
                  <!--                      <img :src="item">-->
                  <!--                      <i v-if="!isDisabled" class="el-icon-error btndel" @click="handleRemove(index)"/>-->
                </div>
                <!-- <div v-if="pram.sliderImages.length<6 && !isDisabled" class="upLoadPicBox" @click="modalPicTap('2')">
                  <div class="upLoad">
                    <i class="el-icon-camera cameraIconfont" />
                  </div>
                </div> -->
              </div>
            </el-form-item>
          </template>
          <template v-if="form.rescueHandle.videoList">
            <el-form-item>
              <div class="acea-row">
                <div
                    v-for="(item,index) in form.rescueHandle.videoList"
                    :key="index"
                    class="videoBox"
                    draggable="true"
                >
                  <video v-if="item" :src="item" controls="true" autoplay="false" style="height: 120px;margin: 30px 30px 0 0;"></video>
                </div>
              </div>
            </el-form-item>
          </template>
        </el-form-item>
        <el-form-item>
          <el-button @click="close">取消</el-button>
        </el-form-item>
      </el-form>
  </div>
</template>
<script>
import {detail, getAnimalTypeApi, save} from "@/api/salvation";
import {getForm} from "@/utils/utils";
import UploadFile from "@/components/File/UploadFile.vue";
import Tinymce from "@/components/Tinymce/index.vue";

export default {
  components: {Tinymce, UploadFile},
  props:{
    id:{
      default:null
    }
  },
  data(){
    return{
      form:{
        id:null,
        type:'',
        position:'',
        specificPosition:'',
        animalSituation:'',
        createTime:'',
        rescueHandle:{},
        picList:[],
        videoList:[],
      },
      typeList:[],
      rules:{
        type: [{ required: true, message: '请输入种类', trigger: ['blur'] }],
        position: [{ required: true, message: '请输入位置', trigger: ['blur'] }],
        specificPosition: [{ required: true, message: '请输入具体位置', trigger: ['blur'] }],
        animalSituation: [{ required: true, message: '请输入野生动物情况', trigger: ['blur'] }],
        createTime: [{ required: true, message: '请选择创建时间', trigger: ['blur'] }],
      },
      roles:[],
      saveLoading:false,
      formLoading:false,
      uploads:{
        show:false,
        multiple:true,
      }
    }
  },
  mounted() {
    if(this.id){
      this.getDetail();
    }
    this.getAnimalType()
  },
  methods:{
    getFile(fileList){
      // console.log(fileList);
    },
    getAnimalType(){
      this.formLoading=true
      getAnimalTypeApi().then(res=>{
        this.typeList = res
      }).finally(()=>{
        this.formLoading=false;
      })
    },
    getDetail(){
      this.formLoading=true
      detail(this.id).then(res=>{
        getForm(res,this.form);
        this.form = res
        res.url = res.url.slice(0, -1);
        this.form.picList=res.url? res.url.split(',') : []
        res.videoUrl = res.videoUrl.slice(0, -1);
        this.form.videoList=res.videoUrl? res.videoUrl.split(',') : []
      }).finally(()=>{
        this.formLoading=false;
      })
    },
    handlerSubmit(){
      if(this.saveLoading||this.formLoading){
        return;
      }
      this.$refs.form.validate(valid=>{
        if(!valid)return;
        this.saveLoading=true;
        save(this.form).then(()=>{
          this.$message.success('保存成功');
          this.close();
        }).finally(()=>{
          this.saveLoading=false
        })
      })
    },
    close(){
      this.$emit('hideEditDialog')
    }
  }
}
</script>
